<template>
  <h3>{{ $t('单日流量数') }}</h3>
  <div ref="el" style="width:95%; height:27vh" id="bar_charts"></div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue'
import * as echarts from 'echarts'
import {useResizeObserver} from '@vueuse/core'
import {getFlowData} from '~/api/screen'

let myChart = null
onMounted(() => {
  const chartDom = document.getElementById('bar_charts')
  if (chartDom) {
    myChart = echarts.init(chartDom)
    getData()
  }
})
onBeforeUnmount(() => {
  if (myChart) echarts.dispose(myChart)
})

// 基于准备好的dom，初始化echarts实例
function getData() {
  console.log('mid bar')
  const font_color = '#fff'
  let Data = []
  let DataX = []
  let DataY = []
  getFlowData().then(res => {
    console.log('getFlowData', res.data)
    Data = res.data
    console.log(Data);
    DataX = Data.dateX
    console.log(DataX);
    DataY = Data.dateY
    let xAxisShape = {
      data: DataX,
      // 轴线样式
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolOffset: 14,
        lineStyle: {
          color: font_color
        }
      },
      // 标签
      axisLabel: {
        /*inside: true,*/
        interval: 0,
        textStyle: {
          color: font_color,
          fontSize: 14
        }
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      z: 10
    }
    let yAxisShape = {
      type: 'value',
      name: '单位：个',

      // 轴线样式
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolOffset: 14,
        lineStyle: {
          color: font_color
        }
      },
      axisTick: {
        show: false
      },
      // 标签
      axisLabel: {
        textStyle: {
          color: font_color,
          fontSize: 14
        }
      }
    }
    let option = {
      title: {
        text: '',
        subtext: ''
      },
      grid: {
        x: 50,
        // y: 40,
        x2: 0,
        y2: 40
      },
      xAxis: xAxisShape,
      yAxis: yAxisShape,
      legend: {},
      dataZoom: [
        {
          type: 'inside'
        }
      ],
      // 触发当列阴影
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      series: [
        {
          data: DataY,
          type: 'bar',
          // barGap: '-100%',
          // barCategoryGap: '40%',
          showBackground: true,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#0efdff' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#0efdff' }
              ])
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  })
}

// vueuse 里面的 useResizeObserve   在使用myChart.resize() 重新自己设定大小
const el = ref(null)
useResizeObserver(el, entries => myChart.resize())
</script>

<style scoped>

</style>